<template>
  <div class="lists">
      <div v-for="citys in cityList" :key="citys[0]">
          <p class="city-title" :ref="citys[0]">{{citys[0]}}</p>
          <p class="city-item" v-for="city in citys[1]" :key="city.id" @click="changeCity(city.name)">{{city.name}}</p>
      </div>
  </div>
</template>

<script>
    export default {
        name:'CityList',
        props:{
            cityList:Array,
            CityIndexList:Array,
            elementIndex:String
        },
        methods:{
            changeCity(name){
                this.$emit('changeCity',name)
            }
        },
        watch:{
            elementIndex(val){
                if(val === '顶'){
                    return false
                }
                // 当 ref 和 v-for 一起使用时，获取到的引用会是一个数组（包含DOM节点或组件实例的数组）。
                this.$emit('singleLetter',this.$refs[val][0])
            }
        },
        mounted(){
            // console.dir(this.$refs.A[0]);
        }
    }
</script>

<style lang="scss" scoped>
    .lists{
        width:100%;
        background-color:#fff;
        .city-title{
            height:30px;
            border-top:1px solid #ccc;
            background:#f0efed;
            line-height: 29px;
            padding-left:10px;
            box-sizing:border-box;
            text-align:left;
        }
        .city-item{
            margin:0 10px;
            height:35px;
            line-height:35px;
            border-bottom:1px solid #ccc;
            box-sizing: border-box;
            text-align:left;
            &:last-child{
                border-bottom:none;
            }
        }
    }
</style>
